<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<script src="../../js/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../js/public.js"></script>
	<link rel="stylesheet" type="text/css" href="../../css/public.css">
</head>

<body class="bg" style="padding-bottom: 0;">
	<div class="header-top">
		<div class="content">
			<img src="../../static/icon.png" class="icon">
			<div class="title-bar">
				<a href="/views/teacher/teachers.html"><span data-i18n-text="AnnualAvg">Enterprise</span></a>
			</div>
		</div>
		<div class="content" style="margin-right: 2%;">
			<div class="title-right-bar" style="border-left:none;">
				<span>中文</span>
				<span>USD</span>
				<i class="iconfont icon-xiang-zuo ic"
					style="margin-left: 9px;padding: 0 16px;font-size: 30px;color: #BDBDBD;transform: rotate(270deg) scale(0.6);"></i>
				<div class="select-lang">
					<div>
						<h3>语言</h3>
						<select name="">
							<option value=" ">中文</option>
							<option value="实验1">英文</option>
							<option value="实验2">德语</option>
						</select>
					</div>
					<div>
						<h3>货币</h3>
						<select>
							<option value="volvo">USD</option>
							<option value="saab">USD</option>
						</select>
					</div>
				</div>
			</div>
			<a href="/index.html" id="stu">
				<i class="iconfont icon-denglu1" style="font-size: 20px;color: #BDBDBD;margin-left: 16px;"></i>
				<span>登录</span>
			</a>
		</div>
	</div>
	<div class="draw-bg">
		<img src="../../static/lllustration/Knowledge%2003.png" alt="Knowledge.jpg" class="know-image">
		<div class="draw-description">
			<h1>关于我们</h1>
			<p class="draw-first">
				ChineseLessons.Online(CLO)从名字中就可以知道，我们是专注汉语学习的在线平台。
			</p>
			<p class="draw-second">
				2021年CLO作为第一个专注汉语的学习的平台诞生
			</p>
		</div>
	</div>
	<div class="grid-container">
		<div class="grid-title">
			<h1>我们的核心价值</h1>
			<p>Our core values</p>
			<div class="down-line"></div>
		</div>
		<div class="setting-wh">
			<div class="item" style="background-color: #F6BD79;" id="box">
				<div class="left-box">
					<p>用户体验</p>
					<p>重视用户体验,学习效果</p>
				</div>
				<div class="m-title">
					<p>用户体验</p>
					<img src="../../static/lllustration/undraw_Customer_survey_re_v9cj.png"
						alt="undraw_Customer_survey_re_v9cj.png">
				</div>
			</div>
			<div class="item" style="background-color: #4B53AB;" id="box">
				<div class="left-box" style="background-color: #4B53AB;">
					<p>老师感受</p>
					<p>站在老师的立场,理解老师的感受。努力达到平衡共赢</p>
				</div>
				<div class="m-title" style="background-color: #4B53AB;">
					<p>老师感受</p>
					<img src="../../static/lllustration/Office%2001.png" height="110px" class="class-img"
						alt="undraw_Customer_survey_re_v9cj.png">
				</div>
			</div>
			<div class="item" style="background-color: #F3737A;" id="box">
				<div class="left-box" style="background-color: #F3737A;">
					<p>进化</p>
					<p>永不停止的进化,追求更逼真的学习效果</p>
				</div>
				<div class="m-title" style="background-color: #F3737A;">
					<p>老师感受</p>
					<img src="../../static/lllustration/Knowledge%2003.png" height="110px" class="class-img"
						alt="undraw_Customer_survey_re_v9cj.png">
				</div>
			</div>
			<div class="item" style="background-color: #F168BD;" id="box">
				<div class="left-box" style="background-color: #F168BD;">
					<p>不做坏事</p>
					<p>诚实本着良心做事,学习效果</p>
				</div>
				<div class="m-title" style="background-color: #F168BD;">
					<p>不做坏事</p>
					<img src="../../static/lllustration/Protection%2001.png" height="110px" class="class-img"
						alt="undraw_Customer_survey_re_v9cj.png">
				</div>
			</div>
			<div class="item" style="background-color: #8C72EF;" id="box">
				<div class="left-box" style="background-color: #8C72EF;">
					<p>持久</p>
					<p>坚持就是胜利</p>
				</div>
				<div class="m-title" style="background-color: #8C72EF;">
					<p>持久</p>
					<img src="../../static/lllustration/l-bg.png" height="110px" class="class-img"
						alt="undraw_Customer_survey_re_v9cj.png">
				</div>
			</div>
			<div class="item" style="background-color: #6B9FF0;" id="box">
				<div class="left-box" style="background-color: #6B9FF0;">
					<p>享受过程</p>
					<p>工作着,快乐的显示这个过程</p>
				</div>
				<div class="m-title" style="background-color: #6B9FF0;">
					<p>享受过程</p>
					<img src="../../static/lllustration/Protection%2001.png" height="110px" class="class-img"
						alt="undraw_Customer_survey_re_v9cj.png">
				</div>
			</div>
		</div>
	</div>
</body>

</html>
<script type="text/javascript">
	// 下拉框
	downout();
	// 页尾生成
	productfooter('body', 4);
	$('.item').each(function () {
		$(this).mouseover(function () {
			$(this).find('.m-title p').toggleClass('text-move');
			$(this).find('img').toggleClass('move');
			$(this).find('.left-box').toggleClass('move-left');
		})
	})
	$('.item').each(function () {
		$(this).mouseout(function () {
			$(this).find('.m-title p').removeClass('text-move');
			$(this).find('img').removeClass('move');
			$(this).find('.left-box').removeClass('move-left');
		})
	})

</script>
<style type="text/css">
	.class-img {
		width: 100%;
		position: relative;
		left: 10px;
	}

	.m-tilte {
		overflow: hidden;
		width: 100%;
		height: 100%;
	}

	.left-box {
		display: flex;
		justify-content: center;
		flex-flow: column wrap;
		width: inherit;
		height: 100%;
		background-color: #F6BD79;
		border-radius: 6px;
		position: absolute;
		padding: 0 5px;
		right: 100%;
		top: 0;
		transition: transform 1.5s ease-in-out;
	}

	#box p {
		transition: transform 1.5s ease-in-out;
	}

	#box img {
		transition: transform 1.5s ease-in-out;
	}

	.move-left {
		height: 100%;
		display: flex;
		justify-content: center;
		flex-flow: column wrap;
		transform: translateX(100%);
		transition: transform 1.5s ease-in-out;
	}

	.move {
		display: block;
		transform: translateX(100%);
		transition: transform 1.5s ease-in-out;
	}

	.text-move {
		transform: translateX(-100%);
		transition: transform 1.5s ease-in-out;
	}

	.bg {
		background-color: rgba(237, 239, 240, 1);
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.draw-bg {
		width: 100%;
		padding: 88px 0 12px 190px;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		background-image: url(../../static/lllustration/llustration.png);
	}

	.know-image {
		width: 245px;
		height: 235px;
	}

	.draw-description {
		margin-left: 25px;
		color: #384047;
		font-weight: Bold;
	}

	.draw-description>h1 {
		font-size: 36px;
	}

	.draw-first {
		margin-top: 15px;
		color: #384047;
		font-size: 16px;
		font-weight: Bold;
	}

	.draw-second {
		color: #384047;
		font-size: 16px;
		font-weight: Bold;
		margin-top: 10px;
	}

	.grid-container {
		width: 100%;
		height: auto;
		padding: 6px 0 120px 0;
		background-color: #fff;
	}

	.setting-wh {
		width: 80%;
		margin: auto;
		display: grid;
		grid-template-columns: auto auto auto;
		grid-template-rows width: auto auto;
		grid-gap: 50px 20%;
	}

	.setting-wh>.item {
		box-sizing: border-box;
		width: 278px;
		overflow: hidden;
		padding: 15px 6px;
		border-radius: 6px;
		transition: transform 1.5s ease-in;
		position: relative;
	}

	.setting-wh p {
		color: #fff;
		font-size: 16px;
		margin-left: 18px;
	}

	.setting-wh>img {
		width: 266px;
		height: 112px;
		position: absolute;
		top: 0;
		left: 0;
	}

	.grid-title {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding-bottom: 2%;
	}

	.grid-title>h1 {
		font-size: 36px;
		color: #384047;
	}

	.grid-title>p {
		padding: 10px 0;
		font-size: 9px;
		color: #777B81;
	}

	.grid-title>.down-line {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background-color: #FFD7B6;
		position: relative;
		display: flex;
		justify-content: space-between;
	}

	.down-line::before {
		content: "";
		width: 160px;
		height: 1px;
		border-bottom: 1px solid #FFD7B6;
		position: absolute;
		top: 5px;
		left: 20px;
	}

	.down-line::after {
		content: "";
		width: 160px;
		height: 1px;
		border-bottom: 1px solid #FFD7B6;
		position: absolute;
		top: 5px;
		right: 20px;

	}

	#stu {

		display: flex;
		justify-content: center;
		margin-left: 20px;
		color: #504f4f;

	}
</style>